<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="button">close</button>
<ul id="ul"></ul>
<script>
    var ul = document.getElementById("ul");

    if (window.EventSource) {

        var bt = document.getElementById("button");

        //跨域时指定第二个参数，打开withCredentials属性，表示是否一起发送 Cookie。
        var eventSource = new EventSource("http://localhost:8080/flux/index3", {withCredentials: true});

        bt.onclick = function () {
            eventSource.close();
        }

        eventSource.onmessage = function (e) {
            var li = document.createElement("li");
            li.innerHTML = e.data;
            ul.appendChild(li);
        };

        //只要和服务器连接，就会触发open事件 eventSource.addEventListener("open",function(){ console.log("和服务器建立连接"); }); //处理服务器响应报文中的load事件 eventSource.addEventListener("load",function(e){ console.log("服务器发送给客户端的数据为:" + e.data); }); //如果服务器响应报文中没有指明事件，默认触发message事件 eventSource.addEventListener("message",function(e){ console.log("服务器发送给客户端的数据为:" + e.data); }); //发生错误，则会触发error事件 eventSource.addEventListener("error",function(e){ console.log("服务器发送给客户端的数据为:" + e.data); }); } else{ console.log("服务器不支持EvenSource对象"); }
        eventSource.addEventListener("open", function () {
            console.log("和服务器建立连接");
        });

        //处理服务器响应报文中的load事件
        eventSource.addEventListener("load", function (e) {
            console.log("服务器load数据为:" + e.data);
        });

        //如果服务器响应报文中没有指明事件，默认触发message事件
        eventSource.addEventListener("test-event", function (e) {
            console.log("服务器发送给客户端的数据为:" + e.data);
        });

        //发生错误，则会触发error事件
        eventSource.addEventListener("error", function (e) {
            console.log("服务器error数据为:" + e.data);
        });
    } else {
        console.log("服务器不支持EvenSource对象");
    }

</script>
</body>

</html>